<template>
  <div>
    <el-form :inline="true" :model="searchParams">
      <el-form-item label="选择考核月度">
        <el-date-picker
          v-model="searchParams.checkDate"
          type="month"
          placeholder="选择月">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="销售部门">
        <el-select v-model="searchParams.orgId" placeholder="请选择">
          <el-option
            v-for="item in departmentList"
            :key="item.value"
            :label="item.text"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="changeHandle">选择</el-button>
      </el-form-item>
    </el-form>
    <div :style="{
      'font-size': '20px',
      'font-weight': 'bold',
      'padding': '10px'
    }">{{ searchResultTitle }}</div>
    <FilterTable
      ref="table"
      :columns="columns"
      :fetchapi="fetchApi"
      :params="fetchParams"
      :datakey="'records'"
      :onColumnsChange="columns => this.columns = columns"
      :isSelectColumn="false"
    />
  </div>
</template>

<script>
import { getSalesVolumeGoalList, getSaleOrg } from '@/api/vehicle/salesTargetManagement'
import { dictionary } from '@/utils/dictMixin';
import moment from 'moment'
export default {
  name: '',
  mixins: [],
  data () {
    return {
      columns: this.createTableColumns(),
      fetchApi: getSalesVolumeGoalList,
      fetchParams: {},
      searchParams: {
        checkDate: new Date(),
        orgId: ''
      },
      searchResultTitle: '',
      departmentList: [], // [{value:1,text:''}]
    }
  },
  created () {
    let { searchParams } = this
    this.searchResultTitle = `${moment(searchParams.checkDate).format('YYYY年M月')}销售目标`
    this.init()
  },
  methods: {
    async init () {
      const res = await getSaleOrg();
      if (res.resultCode === 200) {
        this.departmentList = res.data.map(x => ({ value: x.orgId, text: x.orgName }));
      }
    },
    createTableColumns() {
      return [
        {
          title: '销售顾问',
          dataIndex: 'consultantName',
        },
        {
          title: '任务量(总台次)当前|目标',
          dataIndex: 'taskCount',
          width: '200',
          render: props => {
            console.log(props)
            return (<span>{`${props.row.nowTaskCount} | ${props.row.taskCount}`}</span>)
          }
        },
        {
          title: '金融(渗透率)当前|目标',
          dataIndex: 'financialRatio',
          width: '200',
          render: props => {
            return (<span>{`${props.row.newFinancialRatio}% | ${props.row.financialRatio}%`}</span>)
          }
        },
        {
          title: '保险(渗透率)当前|目标',
          dataIndex: 'insuranceRatio',
          width: '200',
          render: props => {
            return (<span>{`${props.row.newInsuranceRatio}% | ${props.row.insuranceRatio}%`}</span>)
          }
        },
        {
          title: '精品(金额)当前|目标',
          dataIndex: 'renovationAmount',
          width: '200',
          render: props => {
            return (<span>{`${props.row.newRenovationAmount} | ${props.row.renovationAmount}`}</span>)
          }
        },
        {
          title: '上牌(渗透率)当前|目标',
          dataIndex: 'licenceRatio',
          width: '200',
          render: props => {
            return (<span>{`${props.row.newLicenceRatio}% | ${props.row.licenceRatio}%`}</span>)
          }
        },
      ]
    },
    changeHandle() {
      let { searchParams } = this
      if (!searchParams.checkDate||!searchParams.orgId) {
        this.$message.error('请确认查询信息')
        return
      }
      this.searchResultTitle = `${moment(searchParams.checkDate).format('YYYY年M月')}销售目标`
      searchParams.checkDate = moment(searchParams.checkDate).format('YYYY-MM')
      this.fetchParams = Object.assign({}, searchParams);
    },
    // 日期预处理
    preDateHandler(val, formatCode='YYYY-MM-DD HH:mm:ss') {
      let resultDate = val ? moment(Number(val)).format(formatCode) : val;
      if ((resultDate == 'Invalid date' || resultDate == 'Invalid Date') && val) {
        resultDate = moment(val).format(formatCode)
      }
      return resultDate;
    },
  }
}
</script>
<style lang="less" scoped>

</style>
